<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		  <form>
		        <!-- 第一种方式 定义了一个validatelt函数-->
		            <!-- <p>姓名：<label><input type="text" name="" required="required"  pattern="[\u4e00-\u9fa5]{2,4}" placeholder="请输入姓名" oninvalid="validatelt(this,'真实姓名必须是中文，且长度不小于2，不大于4')"></label></p>
		
		            <p>手机号码：<label><input type="tel" name="" required="required" maxlength="11"  pattern="^(0|86|17951)?1[0-9]{10}" placeholder="请输入手机号" oninvalid="validatelt(this,'请输入11位手机号码')" ></label></p> -->
		
		        <!-- 第二种调用html5自带的验证 -->
		
		            <p>姓名：<label><input type="text" name=""  required="required" pattern="[\u4e00-\u9fa5]{2,4}" placeholder="请输入姓名" oninvalid="setCustomValidity('真实姓名必须是中文，且长度不小于2，不大于4')"  oninput="setCustomValidity('')"></label></p>
		
		            <p>密码：<label><input type="password" name="" required="required" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="请输入密码" oninvalid="setCustomValidity('6~20字母数字或下划线')"  oninput="setCustomValidity('')"></label></p>
		
		            <p>身份证号：<label><input type="text" name="" required="required" pattern="^([0-9]){18}(x|X)?$" placeholder="请输入身份证号" oninvalid="setCustomValidity('请输入正确的身份证号码')" maxlength="18" oninput="setCustomValidity('')"></label></p>
		
		            <p>手机号码：<label><input type="tel" name="" required="required" maxlength="11"  pattern="^(0|86|17951)?1[0-9]{10}" placeholder="请输入手机号" oninvalid="setCustomValidity('请输入11位手机号码')" oninput="setCustomValidity('')"></label></p>
		
		            <p>邮箱：<label><input type="email" name="" required="required"  placeholder="请输入邮箱" ></label></p>
		
		            <p>时间：<label><input type="date" name="" required="required"  pattern="" placeholder="请输入时间" ></label></p>
		
		            <p>网址：<label><input type="url" name="" required="required"  pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" placeholder="请输入网址" ></label></p>
		
		            <input type="submit" name="提交">
		        </form>
		 
	</body>
</html>
